<template>
  <q-list dense>
    <!--            -->
    <q-bar class="bg-green-1 rounded-borders q-my-xs" header>
      <span class="q-mr-lg">  </span>
    </q-bar>

    <q-splitter
      v-model="splitterModel"
      separator-class="bg-white"
      separator-style="height: 1"
      style="height: calc(100vh - 116px)"
    >
      <template v-slot:before>
        <div class="q-py-xs bg-cyan-1 full-height rounded-borders">
          <q-tree
            v-model:selected="templateSelected"
            :nodes="fileNodes"
            class="q-mx-xs text-subtitle2 text-no-wrap text-bold"
            default-expand-all
            node-key="value"
            selected-color="purple"
            @lazy-load="onLazyLoad"
          />
        </div>
      </template>

      <template v-slot:after>
        <q-card
          bordered
          class="q-ml-xs"
          flat
          style="height: calc(100%); width: calc(100% - 4px)"
        >
          <ql-editor
            :path="templateSelected"
            editor-id="templateEditor"
          />
        </q-card>
      </template>
    </q-splitter>
  </q-list>
</template>
<script lang="ts" setup>
import QlEditor from 'components/QlEditor.vue';
import { ref } from 'vue';
import { Template } from 'src/types';
const splitterModel = ref(25);
const templateSelected = ref('');
const fileNodes = ref(
  [] as { label: string; lazy: boolean; value: string; children?: [] }[]
);
const onLazyLoad = ({ node, key, done }) => {
  // call fail() if any error occurs
  console.log('node', node);
  console.log('key', key);

  // let files: { label: string; value: string; lazy: boolean }[] = [];
  window.ipcCom.getFilePathTree(key).then((res: string[]) => {
    done(
      res.map((i) => {
        console.log(
          'i.charAt(0)?i.substring(1):i',
          i.charAt(0) ? i.substring(1) : i
        );
        return {
          label: i,
          value: key + '\\' + i,
          lazy: !isFileName(i) as boolean,
        };
      })
    );
  });
};

</script>
<style lang="sass" scoped>
</style>
